<template>
  <div style="width: 100%" v-show="show">
    <el-collapse v-model="activeName">
      <el-collapse-item title="扩展的属性" name="1">
        <avue-crud :option="{...option,selection:!disabled}"
                   :table-loading="loading"
                   :data="formDataAll.extendAttributeList"
                   @selection-change="v=>selection=v"
                   ref="crud">
          <template slot="menuLeft">
            <el-button size="small" type="primary" :disabled="disabled"
                       @click="$refs['gpd'].open(formDataAll.extendAttributeList,{purpose:1})">
              添加
            </el-button>
            <el-button size="small" type="primary" :disabled="disabled" @click="$refs['ap'].open()">
              新增并添加
            </el-button>
            <el-button size="small" :disabled="disabled" @click="remove">
              移除
            </el-button>
          </template>
          <template slot="columnDefault" slot-scope="{row}">
            <span :id="'cell_'+row.oid">{{ setLabel(row, 'cell_') }}</span>
          </template>
        </avue-crud>
      </el-collapse-item>
      <el-collapse-item title="继承的属性" name="2" v-if="!displayTable">
        <avue-crud :option="opt(option)"
                   :table-loading="loading"
                   :data="extendsData"
                   ref="crud">
          <template slot="columnDefault" slot-scope="{row}">
            <span :id="'cell_-'+row.oid">{{ setLabel(row, 'cell_-') }}</span>
          </template>
        </avue-crud>
      </el-collapse-item>
    </el-collapse>

    <add-properties ref="ap" @addToList="v=>addToList(v,'ap')"
                    :disabledAttr="['dynamicFlag']"
                    :defaultValue="{dynamicFlag:1}">
    </add-properties>
    <get-properties-dialog ref="gpd"
                           :column="option.column"
                           :type="!displayTable?null:1"
                           :ids="extendsData.map(i=>i.oid).join(',')"
                           @addToList="v=>addToList(v,'gpd')">
    </get-properties-dialog>
  </div>
</template>

<script>
import GetPropertiesDialog from "@/views/DMDComponent/getPropertiesDialog.vue";
import AddProperties from "@/views/DMDComponent/addProperties.vue";

import * as api from "@/api/modulManage/entity";

import index from "./index"
import {request} from "axios";
import * as common from "@/api/common";

export default {
  name: "Properties",
  components: {AddProperties, GetPropertiesDialog},
  inject: ["parentIdList", "temp"],
  mixins: [index],
  props: {
    displayTable: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      data: [],
      extendsData: [],
      activeName: ["1", "2"],
      loading: false,
      option: {
        calcHeight: 30,
        dialogWidth: 900,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        selection: true,
        labelWidth: 120,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        align: "left",
        menu: false,
        fit: true,
        column: [
          {
            label: '英文名称',
            prop: 'nameEn',
            overHidden: true,
            msSearch: true,
          },
          {
            label: "中文名称",
            prop: "nameCn",
            overHidden: true,
            msSearch: true,
          },
          {
            label: "编码标识",
            prop: "columnName",
            overHidden: true,
          },
          {
            label: "中文描述",
            prop: "describeCn",
            overHidden: true,
          },
          {
            label: "英文描述",
            prop: "describeEn",
            overHidden: true,
          },
          {
            label: "类型",
            prop: "columnTypeName",
            overHidden: true,
          },
          {
            label: "分类",
            prop: "attributeTypeNameCn",
            overHidden: true,
          },
          {
            label: "必填",
            prop: "required",
            align: "center",
            dicData: [
              {
                label: "是",
                value: 1
              },
              {
                label: "否",
                value: 0
              },
            ]
          },
          {
            label: "单位组",
            prop: "unitGroup",
            cascader: ['unit'],
            overHidden: true,
            dicUrl: "/api/manager-api/mx-dimension-group/list",
            props: {
              label: "nameCn",
              value: "oid"
            }
          },
          {
            label: "默认单位",
            prop: "unitName",
          },
          {
            label: "默认值",
            prop: "columnDefault",
            overHidden: true,
            slot: true
          },
        ],
        afterColumn: [{
          label: "所属类型/接口",
          prop: "packageName",
          width: 120,
          overHidden: true,
        }]
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 1
      },

      selection: [],
    }
  },
  methods: {
    addToList(list, ref) {
      if (ref === "ap") {
        this.formDataAll.extendAttributeList.push(...list);
      } else {
        /*let ids = this.formDataAll.extendAttributeList.map(i => i.oid);
        list.forEach(i => {
          if (!ids.includes(i.oid)) {
            this.formDataAll.extendAttributeList.push(i);
          }
        })*/
        this.formDataAll.extendAttributeList = list;
      }
      this.$refs[ref].close();
    },
    remove() {
      let ids = this.selection.map(i => i.oid);
      this.formDataAll.extendAttributeList = this.formDataAll.extendAttributeList.filter(i => !ids.includes(i.oid));
    },
    opt(option) {
      let o = this.deepCopy(option);
      o.header = false;
      o.column = [...option.column, ...option.afterColumn];
      o.selection = false;
      return o;
    },

    getExtendsAttribute() {
      let name = [];
      if (this.formDataAll.functionInterfaceList && this.formDataAll.functionInterfaceList.length > 0) {
        let n = this.formDataAll.functionInterfaceList.map(i => i.name);
        name.push(...n)
      }
      if (this.formDataAll.businessInterfaceList && this.formDataAll.businessInterfaceList.length > 0) {
        let n = this.formDataAll.businessInterfaceList.map(i => i.name);
        name.push(...n)
      }
      api.extends_attribute({
        typeName: this.formDataAll.parentName,
        interfaceNames: name.join(","),
        refType: this.temp
      }).then(res => {
        this.extendsData = res.data.data;
        this.formDataAll.extendsAttributeData = res.data.data;
      })
    },
    getEnumList() {
      request({url: "/api/manager-api/mx-code-type/list", method: "get"}).then(res => {
        this.enumList = res.data.data;
      })
    },
    setLabel({associatedDataType, columnDefault, oid}, affix) {
      let obj = this.enumList.filter(i => i.oid === associatedDataType)[0];
      if (obj && obj.name) {
        common.getDic(obj.name).then(res => {
          let d = res.data.data.filter(i => columnDefault == i.value)
          if (d && d.length > 0) {
            document.querySelector("#" + affix + oid).innerText = d[0].name
          }
        })
      }
      return columnDefault
    }
  },
  created() {
    this.getEnumList();
  },
  watch: {
    show: {
      handler(v) {
        if (v) {
          this.getExtendsAttribute();
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped>

</style>
